<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .header {   
        height: 36px;
        border-top: 3px solid #10e160;
        border-bottom: 1px solid #ccc;
    }
    .header a {
        display: inline-block;
        /* width: 80px; */
        padding: 0 16px;
        height: 36px;
        
        text-align: center;
        font-size: 16px;
        color: #000000;
        line-height: 36px;
        /* 去掉下划线。 */
        text-decoration: none;
    }
    .header a:hover {
        background-color: #3efa86;
        /* 这个color改变了字体的颜色。 */
        color: #fff;
    }
</style>
<body>
    <div class="header">
        <a href="javascript:;">新浪导航</a>
        <a href="javascript:;">新浪导航</a>
        <a href="javascript:;">新浪导航</a>
        <a href="javascript:;">新浪导航</a>

    </div>
    
</body>
</html>